 import {defineComponent, VNode, ref } from 'vue'
import '@src/modules/intelligentQuality/style/qualityHeader.scss'
import platform from '@src/util/platform.ts'
/* util */
import { t } from '@src/locales'
/* components */
import MoneyDialog from '@src/modules/intelligentQuality/views/components/moneyDialog.tsx'

import trigger_right from '@src/assets/img/quality-right.png'
import trigger_bg from '@src/assets/img/trigger_bg.png'

export default defineComponent({
  // @ts-ignore
  name: 'qualityHeader',
  props: {},
  setup() {
    const moneyDialog = ref<HTMLDivElement | null>(null)

    const useMoneyHandler = () => {
      moneyDialog.value?.showDialog()
    }

    return {
      moneyDialog,
      useMoneyHandler
    }
  },
  methods: {
  },
  render() {
    return (
      <div class={'quailty-header'} style={{backgroundImage: `url(${trigger_bg})`}}>
        <div class={'container'}>
          <h1>智能质检机器人</h1>
          <p>智能质检机器人为客户服务领域的多个场景提供包括图片、语音、语义等智能识别技术，精准提升客户服务自动化和智能化水平，降低企业管理成本。</p>
          <div class="useDoc">
            {/* <el-button type={'plain'} onClick={() => this.useDocHandler()}>{t(("trigger.table.useDoc"))}</el-button> */}
            <el-button type={'plain'} onClick={() => this.useMoneyHandler()}>使用说明</el-button>
          </div>
        </div>
        <div class={'right'}>
          <img src={trigger_right} alt=""/>
        </div>
        <MoneyDialog ref={el => this.moneyDialog = el}/>
      </div>
    )
  }
})